<template>
	<view class="history-card">
		<view class="card-left">
			<image
				class="card-cover"
				src="https://img1.baidu.com/it/u=3090108543,3859059787&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1694797200&t=197ed65fc818f30b03cf09032dc1c4d6"
				mode="scaleToFill"
			></image>

			<view class="card-desc">
				<view class="card-desc-title">星辰大海</view>
				<view class="card-desc-tip">上次观看到第五集</view>
				<view class="card-desc-count">共82集</view>
			</view>
		</view>

		<image v-if="cardDetail.isFollow" class="card-right" src="@/static/images/review/follow_red.png" mode="widthFix"></image>
		<image v-else class="card-right" src="@/static/images/review/follow_white.png" mode="widthFix"></image>
	</view>
</template>

<script setup>
	defineProps({
		cardDetail: Object
	});
</script>

<style lang="scss">
	.history-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 188rpx;
		background: #ffffff;
		box-shadow: 4rpx 4rpx 12rpx 0rpx rgba(102, 102, 102, 0.2);
		border-radius: 12rpx;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.card-left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.card-cover {
				width: 207rpx;
				height: 188rpx;
				border-radius: 12rpx;
			}

			.card-desc {
				display: flex;
				flex-direction: column;
				align-self: flex-start;
				overflow: hidden;
				margin-left: 26rpx;

				.card-desc-title {
					font-size: 36rpx;
					font-weight: 500;
					color: #000000;
					margin-top: 22rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.card-desc-tip {
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
					margin-top: 30rpx;
				}

				.card-desc-count {
					font-size: 24rpx;
					font-weight: 500;
					color: #ff5f04;
					margin-top: 15rpx;
				}
			}
		}

		.card-right {
			width: 50rpx;
			height: 50rpx;
			margin-right: 44rpx;
		}
	}
</style>
